<template>
  <!-- 折线图1  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});

// 定义值
let index = ref(); //ref的应用

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  const xData = ["2020年", "2021年", "2022年", "2023年"];
  const data1 = [7070, 9090, 12330, 17675];
  const data2 = [47.01, 59.11, 45.58, 28.2];
  const legendData = {
    "开采指标(吨)": true,
    同比变动: true,
  };
  const nameData = Object.keys(legendData);

  let option = {
    backgroundColor: "#031d33",
    tooltip: {
      show: true,
      backgroundColor: "#07172c",
      textStyle: {
        color: "rgba(126,199,255,1)",
      },
    },
    legend: {
      align: "left",
      right: "5%",
      top: "4%",
      type: "plain",
      textStyle: {
        color: "#7ec7ff",
        fontSize: 14,
      },
      // icon:'rect',
      itemGap: 10,
      itemWidth: 18,
      show: true,
      selected: legendData,
    },
    grid: {
      top: "25%",
      bottom: "0%",
      left: "4%",
      right: "10%",
      containLabel: true,
    },
    xAxis: {
      data: xData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#7ec7ff",
          fontSize: 14,
        },
      },
    },
    yAxis: [
      {
        type: "value",
        interval: Math.ceil(Math.ceil(Math.max(...data1)) / 5),
        max: Math.ceil(Math.ceil(Math.max(...data1)) / 5) * 5,
        min: 0,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(52,78,130,0.2)",
            width: 1,
            type: "dashed",
          },
        }, axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#7ec7ff",
          fontSize: 14,
        },
      },
      },
      {
        type: "value",
        interval: Math.ceil(
          Math.ceil(
            Math.max(...data2) -
              (Math.min(...data2) > 0 ? "0" : Math.min(...data2))
          ) / 5
        ),
        max: Math.ceil(Math.ceil(Math.max(...data2)) / 5) * 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(52,78,130,0.2)",
            width: 1,
            type: "dashed",
          },
        },
        axisLabel: {
          formatter: "{value} %",
          textStyle: {
            color: "#7ec7ff",
            padding: 16,
          },
        },
      },
    ],
    series: [
      {
        name: nameData[0],
        type: "bar",
        //barWidth: '22px',
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        type: "pictorialBar",
        barCategoryGap: "40%",
        symbolClip: true,
        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fff",
            },
            {
              offset: 1,
              color: "rgba(24,144,255,0.6)",
            },
          ]),
          // shadowColor: '#3C97F2',
          // shadowBlur: 10,
        },
        data: data1,
      },
      {
        name: nameData[1],
        type: "line",
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
          textStyle: {
            color: "red",
            fontSize: 10,
          },
        },
        yAxisIndex: 1,
        showAllSymbol: false, // 显示所有图形。
        symbolSize: 5,
        symbolColor: "#eee",
        symbol: "circle",
        lineStyle: {
          width: 2,
          color: "#F98C6A",
        },
        itemStyle: {
          color: "#F98C6A",
          shadowColor: "#F98C6A",
          shadowBlur: 10,
          borderColor: "#F98C6A",
          borderWidth: 2,
        },
        data: data2,
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
